<template>
  <el-dialog
    title="修改密码"
    :visible.sync="dialogDisplay"
    width="400px"
    :before-close="handleClose"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
      <el-form-item label="旧密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="new-password" placeholder="密码" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input v-model="ruleForm.newPwd" type="password" placeholder="确认密码" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPwd">
        <el-input v-model="ruleForm.confirmPwd" type="password" placeholder="确认密码" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button :loading="updateLoading" type="primary" @click="submitForm('ruleForm')">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { upPass } from '@/api/sys/User'

export default {
  data() {
    var validatePwd = (rule, value, callback) => {
      if (!/\S/.test(value)) {
        callback(new Error('旧密码不能为空'))
      } else {
        callback()
      }
    }
    var validateNewPwd = (rule, value, callback) => {
      if (!/\S/.test(value)) {
        callback(new Error('新密码不能为空'))
      } else if (value.trim().length < 6 || value.trim().length > 20) {
        callback(new Error('密码长度在6到20个字符'))
      } else {
        callback()
      }
    }
    var validateConfirmPwd = (rule, value, callback) => {
      if (!/\S/.test(value)) {
        callback(new Error('确认密码不能为空'))
      } else if (this.ruleForm.newPwd !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else if (value.trim().length < 6 || value.trim().length > 20) {
        callback(new Error('密码长度在6到20个字符'))
      } else {
        callback()
      }
    }
    return {
      dialogDisplay: false,
      ruleForm: {
        password: '',
        newPwd: '',
        confirmPwd: ''
      },
      rules: {
        password: [
          { required: true, validator: validatePwd, trigger: 'blur' }
        ],
        newPwd: [
          { required: true, validator: validateNewPwd, trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, validator: validateConfirmPwd, trigger: 'blur' }
        ]
      },
      updateLoading: false
    }
  },
  created() {

  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // tooo  绑定用户角色
        if (valid) {
          this.updateLoading = true
          const param = {
            id: this.uid,
            oldPwd: this.ruleForm.password,
            newPwd: this.ruleForm.newPwd.trim()
          }
          upPass(param).then(response => {
            this.updateLoading = false
            this.$refs.ruleForm.resetFields()
            this.dialogDisplay = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1000
            })
          }, () => {
            this.updateLoading = false
          })
        } else {
          return false
        }
      })
    },
    handleClose(done) {
      this.dialogDisplay = false
      this.updateLoading = false
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-form{
    margin-left: 40px;
  }
  .el-form-item {
    width: 100%;
    .el-input {
      width: 100% !important;
      margin-right: 40px;
    }
    .el-select {
      width: 240px;
    }
  }
</style>

